import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import "qrc:/qml/styles" as Styles

Item {
    id: statusIndicator

    // 自定义属性
    property string label: ""
    property string value: "0"
    property color statusColor: Styles.Theme.primary
    property string status: "normal"        // normal, warning, error, success
    property bool showIndicator: true       // 是否显示状态点
    property bool animated: true            // 是否启用动画
    property string size: "normal"          // small, normal, large

    // 自动根据status设置颜色
    onStatusChanged: {
        switch(status) {
            case "success":
                statusColor = Styles.Theme.success;
                break;
            case "warning":
                statusColor = Styles.Theme.warning;
                break;
            case "error":
                statusColor = Styles.Theme.danger;
                break;
            default:
                statusColor = Styles.Theme.primary;
        }
    }

    // 尺寸计算
    property int fontSize: {
        switch(size) {
            case "small": return 16;
            case "large": return 32;
            default: return 24;
        }
    }

    property int labelSize: {
        switch(size) {
            case "small": return 10;
            case "large": return 14;
            default: return 12;
        }
    }

    width: Math.max(80, contentColumn.implicitWidth)
    height: contentColumn.implicitHeight + (showIndicator ? 8 : 0)

    Column {
        id: contentColumn
        anchors.centerIn: parent
        spacing: Styles.Theme.spacingXSmall

        // 状态指示点
        Rectangle {
            visible: showIndicator
            width: 8
            height: 8
            radius: 4
            color: statusColor
            anchors.horizontalCenter: parent.horizontalCenter

            // 状态动画
            SequentialAnimation on opacity {
                running: animated && (status === "warning" || status === "error")
                loops: Animation.Infinite
                NumberAnimation { from: 1.0; to: 0.4; duration: 600 }
                NumberAnimation { from: 0.4; to: 1.0; duration: 600 }
            }

            // 成功状态的脉冲动画
            SequentialAnimation on scale {
                running: animated && status === "success"
                loops: Animation.Infinite

                PropertyAnimation {
                    from: 1.0
                    to: 1.3
                    duration: 1000
                    easing.type: Easing.InOutSine
                }
                PropertyAnimation {
                    from: 1.3
                    to: 1.0
                    duration: 1000
                    easing.type: Easing.InOutSine
                }
            }
        }

        // 数值显示
        Text {
            text: value
            font.pixelSize: fontSize
            font.weight: Styles.Theme.fontWeightBold
            color: statusColor
            anchors.horizontalCenter: parent.horizontalCenter

            // 数值变化动画
            SequentialAnimation {
                id: valueAnimation

                PropertyAnimation {
                    target: parent
                    property: "scale"
                    from: 1.0
                    to: 1.2
                    duration: 200
                    easing.type: Easing.OutCubic
                }
                PropertyAnimation {
                    target: parent
                    property: "scale"
                    from: 1.2
                    to: 1.0
                    duration: 200
                    easing.type: Easing.InCubic
                }
            }

            // 监听数值变化
            onTextChanged: {
                if (animated) {
                    valueAnimation.start()
                }
            }
        }

        // 标签文本
        Text {
            text: label
            font.pixelSize: labelSize
            color: Styles.Theme.textSecondary
            anchors.horizontalCenter: parent.horizontalCenter
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.WordWrap
            width: Math.min(implicitWidth, 100)  // 限制最大宽度
        }
    }

    // 悬停效果
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true

        Rectangle {
            anchors.fill: parent
            radius: Styles.Theme.radiusSmall
            color: statusColor
            opacity: parent.containsMouse ? 0.1 : 0
            Behavior on opacity {
                enabled: statusIndicator.animated
                NumberAnimation { duration: Styles.Theme.animationFast }
            }
        }
    }

    // 整体缩放动画
    scale: 1.0
    Behavior on scale {
        enabled: statusIndicator.animated
        NumberAnimation { duration: Styles.Theme.animationFast }
    }
}
